<template>
  <div>
    <h1>Dashboard 页面</h1>
    <RouterLink to="/class/teachers">去 讲师管理</RouterLink>
    <button @click="fn2">动态添加一个路由 /a</button>
    <button @click="fn1">跳转到 /a 路由</button>
    <button @click="fn3">查看当前所有路由数组</button>
    <button @click="fn4">检查某个路由是否在路由器中</button>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()
function fn1() {
  router.push('/a')
}

function fn2() {
  // 动态添加顶层路由
  // router.addRoute({
  //   path: '/a',
  //   component: () => import('@/views/test.vue')
  // })

  // 动态添加子路由
  //    第一个参数，传递父路由的名字
  router.addRoute('index', {
    path: '/a',
    component: () => import('@/views/test.vue')
  })
}

function fn3() {
  // router.getRoutes() 返回当前路由器中所有的路由记录
  //    是一个扁平化的数组，不是 tree 的格式
  console.log(router.getRoutes())
}

function fn4() {
  console.log(router.hasRoute('abcd'))
}
</script>
